<template>
    <div class="person">
        <h2>当前求和为：{{ sum }}，当前bigNum:{{ bigNum }}</h2>
        <button @click="add">点击sum+1</button>
        <hr>
        <button @click="getDog">点击加一只狗</button>
        <img v-for="(dog,index) in dogList" :src="dog" key="index">
    </div>
</template>


<script lang="ts" setup name="Person">
    import useDog from '@/hooks/useDog'      //不同的暴露方式，导入不同
    import {useSum} from '@/hooks/useSum'

    const {dogList,getDog} = useDog()
    const {sum,add,bigNum} = useSum()
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>